/* eslint-disable no-extend-native */
<template>
  <div class="study">
    <div class="main">
      <div class="">
        <p>原数组:{{ array }}</p>
        <p>处理后:{{ array2 }}</p>
        <p>返回值:{{ returnValue }}</p>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" @click="doFunc('pop')">pop</el-button>
      <el-button type="primary" @click="doFunc('unshift', 23, [99, 24], 90)"
        >unshift</el-button
      >
      <el-button type="primary" @click="doFunc('shift')">shift</el-button>
      <el-button type="primary" @click="doFunc('push', 2, [99, 62], 90)"
        >push</el-button
      >
      <el-button type="primary" @click="doFunc('splice',1,2,87,99,23,44,56)">splice</el-button>
      <el-button type="primary" @click="doFunc('pop')">reverse</el-button>
      <el-button type="primary" @click="doFunc('pop')">file</el-button>
      <el-button type="primary" @click="doFunc('pop')">concat</el-button>
      <el-button type="primary" @click="doFunc('pop')">join</el-button>
      <el-button type="primary" @click="doFunc('pop')">slice</el-button>
      <el-button type="primary" @click="doFunc('pop')">indexOf</el-button>
      <el-button type="primary" @click="doFunc('pop')">include</el-button>
      <el-button type="primary" @click="doFunc('pop')">map</el-button>
      <el-button type="primary" @click="doFunc('pop')">foreach</el-button>
      <el-button type="primary" @click="doFunc('pop')">reduce</el-button>
      <el-button type="primary" @click="doFunc('pop')">some</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      array: [1, 34, 53, 66, 2, 45, 67, 89, 32],
      array2: [],
      returnValue: ''
    }
  },
  mounted () {
    this.changeFunction()
  },
  methods: {
    changeFunction () {
      Array.prototype.pop20 = function () {
        //  删除数组的最后一个元素 返回被删除的元素
        const O = Object(this)
        const len = O.length
        if (len < 1) {
          throw Error('array is too small')
        }
        const item = O[len - 1]
        O.length--
        return item
      }
      Array.prototype.unshift20 = function () {
        // 在数组的最前头增加一个或者多个元素 返回数组的长度
        const O = Object(this)
        const len = O.length
        const arg = [...arguments][0]
        const argLen = Object(arg).length
        // for (let i = len + argLen - 1;i >= 0;i--) {
        //   if (i <= argLen - 1) {
        //     O[i] = arg[i]
        //   } else {
        //     O[i] = O[i - argLen]
        //   }
        // }
        for (let i = 0; i < len + argLen; i++) {
          if (i < argLen) {
            O[i] = arg[i]
          } else {
            O[i] = O[i - argLen]
          }

        }
        return O.length
      }
      Array.prototype.shift20 = function () {
        // 删除最前面的对象 返回被删除的对象
        const O = Object(this)
        const len = O.length
        const item = O[0]
        if (len < 1) {
          throw Error('array is too small')
        }
        for (let i = 0; i < len - 2; i++) {
          O[i] = O[i + 1]
        }
        O.length--
        return item
      }
      Array.prototype.push20 = function () {
        const O = Object(this)
        const len = O.length
        const arg = [...arguments][0]
        const argLen = Object(arg).length
        for (let i = 0; i < len + argLen; i++) {
          if (i >= len) {
            O[i] = arg[i - len]
          }
        }
        return argLen + len
      }
      Array.prototype.splice20 = function() {
        const O = Object(this)
        const len = O.length
        let [index, count, ...items] = [...arguments][0]
        const deleteArr = []
        count = count ? count : (len - index)
        for (let i = 0;i < count;i++) {
          deleteArr.push(O[index + i])
          delete O[index + i]
        }
        const newArr = this.filter((item) => item !== null)
        for (let i = 0;i < newArr.length + items.length;i++) {
          if (index <= i < index + items.length) {
            O[i] = items[i - index]
          } else if (i >= index + items.length) {
            O[i] = O[i - items.length]
          }

        }
        return deleteArr
      }
    },
    doFunc () {
      const funcName = [...arguments][0]
      const arg = [...arguments].slice(1)
      this.returnValue = this.array[`${funcName}20`](arg ? arg : '')
      this.$forceUpdate()
      this.array2 = this.array
    }

  }
}
</script>

<style lang="less" scoped>
.study {
  min-width: 500px;
  width: 600px;
  margin: auto;
}
.main {
  margin: 100px auto;
  width: 80%;
}
.btn {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .el-button {
    margin: 10px 10px 10px 0;
  }
}
</style>
